<?php
require '../inc/basics.php';
hasPermission('accountManager','rollen');
?>
<script type="text/javascript" >	
		$("#select_user_groups.selectable li").on('click', function() {
			$(this).addClass("ui-selected").siblings().removeClass("ui-selected");
			//get assigned users in group member pane
			$.getJSON("/a/f=adminAssignedUsers", {id : $(this).attr('id')}, function(data){
				$("#select_assigned_users").empty();
				$.each(data, function(key, val) {
					$("#select_assigned_users").append("<li>"+val.name+"</li>\n");
				});
			});
		});

		$(":button#add").click(function(){
			$("#input_edit_group").val(null);
			$("#button_function").val('add');
			$("#row_input").toggle();
			return false;
		});
		
		$(":button#edit").click(function(){
			$("#select_user_groups .ui-selected").each(function () {
				$("#button_function").val('edit');
				$("#select_user_groups").change(function () {
					$("#row_input").hide();
				});
				$("#input_edit_group").val($(this).text());
				$("#row_input").toggle();		
				return false;
			});
			return false;
		});

		$(":button#save").click(function(){
			if($("#button_function").val()=='add'){
				$.getJSON("/a/f=adminAddRole", {name : $("#input_edit_group").val()}, function(data){
					if (data.succes == true){
						$("#select_user_groups").append("<li id="+data.id+">"+data.name+"</li>\n");
						$("#row_input").hide();
					} 
				});
				$("#input_edit_group").val(null);
				$("#row_input").hide();
				$("#button_function").val(null);
				return false;				
			}else if($("#button_function").val()=='edit'){
				var id =  $("#select_user_groups .ui-selected").attr('id');
				var name = $("#input_edit_group").val();
				$.getJSON("/a/f=adminEditRole", {id : id, name : name}, function(data){
					if (data.succes == true){
						$("#select_user_groups .ui-selected").replaceWith("<li id="+id+">"+name+"</li>\n");
						$("#row_input").hide();
					} 
				});
				$("#input_edit_group").val(null);
				$("#row_input").hide();
				$("#button_function").val(null);
				return false;
			}
		});
		
		$(":button#remove").click(function(){
			$("#select_user_groups .ui-selected").each(function () {
				$( "#dialog_confirm_delete" ).dialog({
					resizable: false,
					modal: true,
					width: 280,
					dialogClass: 'dialog_no_title_bar',
					buttons: {
						"Ok": function() {
							$.getJSON("/a/f=adminDeleteRole", {id : $("#select_user_groups .ui-selected").attr('id')}, function(data){
								if (data.succes == true) $("#select_user_groups .ui-selected").remove();
							});
							$( this ).dialog( "close" );
						},
						Cancel: function() {
							$( this ).dialog( "close" );
						}
					}
				});
			});
			return false;
		});

</script>

<div class="inner-center">
	<form>
		<table class="user_accounts">
			<tr><th colspan="2">Groups</th><th colspan="3">Assigned users</th></tr>
			<tr>
				<td>
					<ul id="select_user_groups" class="selectable">
						<?php
						$administrator = Administrator::getInstance();
						$groups = $administrator->listRoles();
						foreach ($groups as $group) {
							echo "<li id=" . $group['id'] . ">" . htmlspecialchars($group['name']) . "</li>\n";
						}
						?>
					</ul>
				</td>
				<td width="30"></td>
				<td>
					<ul id="select_assigned_users" class="selectable"></ul>
				</td>
			</tr>
			<tr><td colspan="2"><button id="add">Add</button>&nbsp;&nbsp;&nbsp;<button id="edit">Edit</button>&nbsp;&nbsp;&nbsp;<button id="remove">Remove</button><td></tr>
			<tr>
				<td colspan="2"><span id="row_input"><input id="button_function" type="hidden"><input id="input_edit_group" type="text" value="">&nbsp;<button id="save">Save</button></span></td>
			</tr>
		</table>
	</form>

	<div id="dialog_confirm_delete">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
			Weet je zeker dat je deze groep (en alle toegewezen permissies!) wilt verwijderen?</p>
	</div>
	
</div>